<template>
  <div>
    <!-- 搜索条件 -->
    <el-row>
      <!-- 搜索的内容 -->
      <el-col :span="5">
        <div class="demo-input-suffix">
          <el-input
            size="small"
            placeholder="输入要搜索的内容"
            suffix-icon="el-icon-search"
            v-model="search">
          </el-input>
        </div>
      </el-col>
      <el-col :offset="1" :span="2" class="select-title">
        死亡地区：
      </el-col>
      <!-- 死亡地区 -->
      <el-col :span="4">
        <el-select v-model="areaValue" placeholder="请选择" size="small">
          <el-option
            v-for="item in area"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :offset="1" :span="4">
        <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
        <el-button type="info" size="small" @click="handleReset">清空条件</el-button>
      </el-col>
    </el-row>
    <!-- 生死溥信息 -->
    <el-row class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        border
        show-header
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="生日"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="lifetime"
          align="center"
          label="寿命"
          width="150">
          <template slot-scope="scope">{{ scope.row.lifetime }}岁</template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">生</span>
            <span v-if="scope.row.status === 0">死</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="area"
          label="死亡地区"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEditShow((scope.row))" type="warning">修改</el-button>
            <el-button size="mini" @click="handleDel(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-row class="pagination">
      <el-col>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 修改阳寿 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm">
        <el-form-item
          label="剩余阳寿"
          :label-width="formLabelWidth"
          prop="lifetime">
          <el-input size="small" v-model="form.lifetime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          :label-width="formLabelWidth"
          prop="statusValue">
          <el-select v-model="form.statusValue" placeholder="请选择" size="small">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditFrom('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'userTable',
  props: {
    // 死亡方式
    area: {
      type: Array,
      default: () => [
        { label: '病死', value: '病死' },
        { label: '加班猝死', value: '加班猝死' },
        { label: '车祸', value: '车祸' },
        { label: '自杀', value: '自杀' },
        { label: '被杀', value: '被杀' }
      ]
    },
    // 人
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      search: '', // 搜索内容
      areaValue: '', // 死亡方式
      multipleSelection: [], // 表格多选
      dialogFormVisible: false, // 弹窗显示还是隐藏
      formLabelWidth: '120px', // 弹窗宽度
      status: [
        { label: '生', value: 1 },
        { label: '死', value: 0 }
      ],
      // 表单数据
      form: {
        statusValue: '', // 状态
        lifetime: '' // 阳寿
      },
      // 验证规则
      rules: {
        lifetime: [
          { required: true, message: '阳寿不能为空', trigger: 'blur' },
          { pattern: /^(0|[1-9][0-9]*)$/, message: '只能输入零和非零开头的数字' }
        ],
        statusValue: [
          { required: true, message: '状态不能为空', trigger: 'blur' },
          { pattern: /^(0|1*)$/, message: '只能选择生活死' }
        ]
      },
      // 当前第几页
      currentPage: 4
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 多选选中的值
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 点击显示修改弹窗
    handleEditShow (row) {
      // console.log(row)
      this.form.lifetime = row.lifetime
      this.form.statusValue = row.status
      this.dialogFormVisible = true
    },
    // 点击删除
    handleDel () {},
    // 重置搜索条件
    handleReset () {
      this.areaValue = ''
      this.search = ''
    },
    // 向父组件传递筛选条件
    handleSearch () {
      let searchFrom = {}
      searchFrom.search = this.search
      searchFrom.areaValue = this.areaValue
      this.$emit('searchFrom', searchFrom)
    },
    // 验证对话框中的表单是否合法
    handleEditFrom (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('handleEditForm', this.form)
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 每页多少条
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前第几页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="less" scoped>
.select-title {
  line-height: 30px;
  text-align: right;
}
.table {
  margin-top: 10px;
}
.pagination {
  text-align: right;
  line-height: 30px;
}
</style>
